<template>
  <view class="contents-box" >
    <view>
		<u-toast ref="uToast" />
	</view>
    <!-- <video ref="localVideo"  page_gesture=true crossOrigin="anonymous" page-gesture='true' controls="controls" style="width:100%;height:100%" autoplay></video> -->

   <view class="status">
          <view class="nofinish" v-if="data.on_line ==0" style="color:#ffffff ">离线</view>
          <view v-else style="color:#FFF" class="finish">在线</view>
        </view>
  <view style="background:none">
		<!-- <view class="u-progress-content">
		</view> -->
	<!-- </u-circle-progress> -->
  </view>
  <view class="fonst" >
      <text style="font-size: 32rpx;font-weight: bold;">{{data.g_name}}({{data.device_id}})</text><br>
      <text style="" class="cardfont">名称：{{data.user_name}}</text><br>
      <!-- <text style="font-size: 16px;font-weight: bold;"></text><br> -->
<text style="" class="cardfont">剩余电量：{{data.bat_l=='' ?'暂无数据' : data.bat_l+'%'}}</text><br>
<text style="" class="cardfont">
        流量：{{data.sim_data_num ==0 ? '暂无数据' : (data.sim_data_num/1024).toFixed(2)+'GB'}}</text>
      </view>
    <view class="fonst">
      
      <!-- <text style="">状态：{{data.on_line ==0 ? '离线' : '在线'}}</text> -->
      
<!-- <u-line-progress active-color="rgb(19 153 33);" inactive-color='#c9c5c5;' :percent="25" ></u-line-progress>--><br> 
      
      
    </view>
    <view class="phone"  @click="handleClick(data)">
  
      <view :class="data.on_line ==0 ? 'backgroundoff' : 'backgroundon'" style="float:left; width: 100rpx;margin: 0rpx 20rpx;height:100rpx;border-radius: 100rpx;overflow: hidden;">
    <img src="../../static/shipintonghua.png" alt="" style=" width: 60%;margin:22rpx 0rpx 0rpx 22rpx">

      </view>
    </view>
  </view>
</template>
<script>
import GLOBAL_VARIABLE from "../helmet/global_variable.js";
export default {
  props: {
    data: {
      type: Object,
      default: 0
    },
    id: {
      type: String,
      default: ""
    },
    timeone: {
      type: String,
      default: ""
    },
    hour: {
      type: String,
      default: ""
    },
    minute: {
      type: String,
      default: ""
    },
    second: {
      type: String,
      default: ""
    },
    host: {
      type: String,
      default: ""
    },
    g_id: {
      type: String,
      default: ""
    },
    admin_id: {
      type: String,
      default: ""
    },
    trueone: {
      type: String,
      default: ""
    },
    alldata: {
      type: Object,
      default: 0
    }
  },
  watch: {
    "$store.state.admin_info"(val) {
      this.adminInfo = val;
      this.UA();
    },
    "$store.state.admin_data"(val) {
      this.adminData = val;
      // console.log(val)
      this.call();
    },
    "$store.state.groupSipVideo"(val) {
      this.group = val;
      console.log(val);
        uni.reLaunch({
        url:
          `/pages/helmet/video?tfgroup=` +true+
          '&roomid='+this.group.room_id+
          "&g_id="+this.g_id +
          "&admin_id="+this.admin_id +
          "&host="+this.host
      });
      // this.call();
    }
  },
  data() {
    return {
      src: "./1.png",
      remark: "",
      imgsrc: "",
      group: {}
    };
  },
  created() {
    // console.log(this.data);
  },
  methods: {
    handleClick(data) {
      let _this = this;
      console.log(data.device_id);
     
      if (data.on_line == 0) {
        this.$refs.uToast.show({
          title: "该安全帽处于离线状态！",
          type: "error"
        });
      } else  {
         let data2 = {
        act: "ma_open_group_sip_video_call",
        device_ids: [data.device_id]
      };
      // console.log("11111111111111111");
      this.$store.dispatch("WEBSOCKET_SEND", JSON.stringify(data2));
      // console.log(this.group.room_id)
      }
      
      
      // else if (this.$store.state.active_devices.msg == "获取成功") {

      //   this.$store.state.active_devices.data.forEach(item => {
      //     if (item.user_info.g_id == data.g_id) {
      //       console.log(item.location_info.in_use);
      //       if (item.location_info.in_use == 1) {
      //         console.log('yes')
      //         this.monitorList(data);
      //       } else if (item.location_info.in_use == 2){
      //         this.$refs.uToast.show({
      //           title: "该安全帽处于被监控状态！",
      //           type: "warning",
      //           icon:false
      //         });
      //       }else if (item.location_info.in_use == 3){
      //         this.$refs.uToast.show({
      //           title: "该安全帽正在视频通话中···",
      //           type: "warning",
      //           icon:false
      //         });
      //       }
      //     }
      //   });
      // }else if(!this.$store.state.active_devices.cmd){
      //   this.$refs.uToast.show({
      //     title: "请再次拨打！",
      //     type: "error"
      //   });
      // }
    },
    // 与帽子建立连接
    monitorList(id) {
      if (this.trueone) {
        this.call();
      } else {
        let data = {
          act: "ma_set_sip_info",
          v_type: "1",
          user_id: this.data.user_id
        };
        this.$store.dispatch("WEBSOCKET_SEND", JSON.stringify(data));
      }
    },
    // 帽子成功接收通话请求并成功响应后开始发起通话
    call() {
      uni.reLaunch({
        url:
          `/pages/helmet/video?user=` +
          this.data.sip_id +
          "&g_id=" +
          this.g_id +
          "&admin_id=" +
          this.admin_id +
          "&host=" +
          this.host +
          "&user_id=" +
          this.data.user_id 
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.cardfont {
  margin-left: 20rpx;
}
.contents-box {
  color: #717171;
  display: none;
  overflow: hidden;
  width: 100% !important;
  margin-bottom: 20rpx;
  background-color: white;
  border: 1px solid #eee;
  padding: 20rpx 20rpx 20rpx 20rpx;
  border-radius: 25rpx;
  box-shadow: 0 0 20rpx #eee;
  display: flex;
  position: relative;
  height: 240rpx;
  // backgorund-color:rgba(120,120,120,.4)
  //   background-image: linear-gradient(
  //   to bottom right,
  //   #dfdfdf, #f1eeee78
  // ) !important;
}

// justify-content: space-between;
// align-items: center;
.card-box {
  width: 60%;
  margin-left: 20rpx;
}
.image-box {
  width: 200rpx;
  height: 190rpx;
  image {
    width: 200rpx;
    height: 190rpx;
  }
}

.title {
  font-size: 34rpx;
  font-weight: 600;
  margin-bottom: 10rpx;
  color: #333333;
  .iconleft {
    font-size: 22rpx;
    position: absolute;
    right: 0;
    top: 0;
    font-weight: 500;
    padding: 0rpx 30rpx;
    border-bottom-left-radius: 100rpx;
    border-top-right-radius: 32rpx;
    background: linear-gradient(-34deg, #1040be, #026dff);
  }
}

.detail {
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 0px 30rpx 0px 0px;
  color: #717171;
  .time {
    display: flex;
    margin-bottom: 20rpx;

    .imageBg {
      width: 25rpx;
      height: 25rpx;
      margin-right: 5rpx;
      padding: 4rpx;
      //  line-height: 25rpx;
    }
    .text {
      line-height: 30rpx;
      font-size: 24rpx;
    }
  }
}

.bottom {
  padding-top: 10rpx;
  color: #111;
}

.bottombox {
  margin-top: 15rpx;
  width: 100%;
  height: 50rpx;
  position: absolute;
  background-color: rgba(16, 91, 245, 74%);
  border-radius: 20px;
  color: white;
  width: 170rpx;
  display: flex;
  align-items: center; /*垂直居中 */
  justify-content: center;
  right: 65%;
  bottom: 10%;
}

.bottombox1 {
  margin-top: 15rpx;
  width: 100%;
  height: 50rpx;
  position: absolute;
  background-color: rgba(16, 91, 245, 74%);
  border-radius: 20px;
  color: white;
  width: 170rpx;
  display: flex;
  align-items: center; /*垂直居中 */
  justify-content: center;
  right: 35%;
  bottom: 10%;
}

.bottombox2 {
  margin-top: 15rpx;
  width: 100%;
  height: 50rpx;
  position: absolute;
  background-color: rgba(16, 91, 245, 74%);
  border-radius: 20px;
  color: white;
  width: 170rpx;
  display: flex;
  align-items: center; /*垂直居中 */
  justify-content: center;
  right: 5%;
  bottom: 8%;
}
.touxiang {
  width: 150rpx;
  // overflow: hidden;
  height: 150rpx;
  border-radius: 150rpx;
  position: relative;
}
.fonst {
  margin-left: 30rpx;
}
.phone {
  position: absolute;
  right: 50rpx;
  // overflow: hidden;
  height: 100rpx;
  // border-radius: 150rpx;
  margin-top: 65rpx;
}
.lighton {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  width: 25rpx;
  height: 25rpx;
  background-color: #55d617;
  border-radius: 40rpx;
  z-index: 1000;
}
.lightoff {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  width: 25rpx;
  height: 25rpx;
  background-color: #dbddda;
  border-radius: 40rpx;
  z-index: 1000;
}
.backgroundon {
  background-color: #16b914;
  // #64b163
}
.backgroundoff {
  background-color: #cfc7c7;
}
.video {
  height: calc(100%);
}
/deep/ .u-circle-progress {
  background-color: transparent !important;
}
/deep/ .u-progress {
  width: 150rpx;
}
.status {
  position: absolute;
  text-align: center;
  //
  top: -0rpx;
  right: -0rpx;
  .finish {
    width: 102rpx;
    font-size: 22rpx;
    // height: 31rpx;
    line-height: 31rpx;
    background: linear-gradient(145deg, #09bb07, #008b00b3);
    border-bottom-left-radius: 40rpx;
    border-top-right-radius: 25rpx;
  }
  .nofinish {
    width: 102rpx;
    font-size: 22rpx;
    line-height: 31rpx;
    background: linear-gradient(145deg, #ff9494, #ff00009e);
    border-bottom-left-radius: 40rpx;
    border-top-right-radius: 25rpx;
  }
  // float: right;
  // margin-top: 2rpx;
  // margin-right: 10rpx;
}
</style>
